<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户主页</title>
    <link rel="stylesheet" th:href="@{/main/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/main/css/user_index.css}">
    <link rel="stylesheet" th:href="@{/main/css/bootstrap.min.css}">
    <script th:src="@{/main/js/jquery-2.1.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/main/layui/layui.js}"></script>
    <style>
        a {
            cursor: pointer;
        }

        a:hover {
            text-decoration: none;
        }

        a:active {
            text-decoration: none;
        }

        .clearfix a {
            color: #333;
        }
    </style>
</head>
<body>
<!--<div class="logo">
    <img src="../../../static/images/logo.png" alt="">
</div>-->
<div class="main">
    <div th:replace="common :: header"></div>
    <div class="layui-carousel" id="test1" style="margin-left: 400px;">
        <div carousel-item="">
            <div>
                <img th:src="@{/main/images/movie/熊出没之原始时代.jpg}" width="500px" height="644px"></img>
            </div>
            <div>
                <img th:src="@{/main/images/movie/名侦探柯南之绀青之拳.jpg}" width="500px" height="644px"></img></div>
            <div>
                <img th:src="@{/main/images/movie/紫罗兰永恒花园.jpg}" width="500px" height="644px"></img></div>
            <div>
                <img th:src="@{/main/images/movie/战狼2.jpg}" width="500px" height="644px"></img></div>
        </div>
    </div>
    <div class="container col-md-9" style="margin-left: 182px;">
        <div class="choose">
            <div class="chooseitem clearfix">
                <div class="left">类型：</div>
                <div class="right">
                    <ul class="clearfix">
                        <li class="select" value=""><a href="">全部</a></li>
                        <li value="1"><a href="#?kind=1">剧情</a></li>
                        <li value="2"><a href="#?kind=2">动作</a></li>
                        <li value="3"><a href="#?kind=3">爱情</a></li>
                        <li value="4"><a href="#?kind=4">喜剧</a></li>
                        <li value="5"><a href="#?kind=5">惊悚</a></li>
                        <li value="6"><a href="#?kind=6">悬疑</a></li>
                        <li value="7"><a href="#?kind=7">战争</a></li>
                        <li value="8"><a href="#?kind=8">奇幻</a></li>
                        <li value="9"><a href="#?kind=9">恐怖</a></li>
                        <li value="10"><a href="#?kind=10">动漫</a></li>
                        <li value="11"><a href="#?kind=11">家庭</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="margin-left: 70px;">
            <div class="movies">
            </div>
        </div>
    </div>
    <div id="page1" style="margin-left: 551px;margin-top: 640px;"></div>
</div>
<script>
    //刷新电影列表
    function fresh() {
        $(".movie-item").remove()
    }

    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '500px'
            , height: '644px'
            , interval: 5000
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });

    function getListData(currPage, kind) {
        $.ajax({
            type: 'GET',
            url: "/movie/GetMovieByStatus", // ajax请求路径
            data: {
                page: currPage, //当前页数
                limit: 10, //每页显示数量
                type: kind
            },
            success: function (res) {
                fresh();
                var data = res.data;
                let html = "";
                if (data.length == 0) {
                    html = html + '<div style="margin: 0 auto; color: #00b7ee">' +
                        '暂无相关影片，敬请期待' + '</div>'
                    document.getElementsByClassName("movies")[0].innerHTML = html;
                    return;
                }
                for (let i = 0; i < data.length; i++) {
                    let score = data[i].mScore == null ? "暂无评分" : data[i].mScore;
                    let img = data[i].mImage;
                    html = html + '<div class="movie-item"> ' +
                        '<div class="poster">' +
                        ' <img src=' + "\"" + img + "\"" + ' width="160" height="220"> ' +
                        '</div>' +
                        ' <div class="name">' +
                        ' <a href=' + "\"" + "/user/movie_index/" + data[i].id + "\"" + '>' + data[i].mName + '</a>' +
                        '</div>' +
                        ' <div class="score"> ' +
                        '<span id="score">' + score + '</span>' +
                        '</div>' +
                        '</div>'
                    document.getElementsByClassName("movies")[0].innerHTML = html;
                }
                paged(res, currPage);
            }
        });
    };

    function paged(res, currPage) {//res后台获取的json数据
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage
            laypage.render({
                elem: 'page1' // 分页容器id
                , count: res.count //总页数
                , limit: 10 //每页显示的数量
                , curr: currPage //当前页
                , first: '首页'
                , last: '尾页'
                , prev: '上一页'
                , next: '下一页'
                , layout: ['first', 'prev', 'page',  'next', 'last', 'skip'] //设置分页显示的内容
                , jump: function (obj, first) {
                    var currPage = obj.curr;  //这里是后台返回给前端的当前页数
                    if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr  ajax 再次请求
                        getListData(currPage);
                    }
                }
            });
        });
    }

    $(function () {
        var kind = document.getElementsByClassName("select")[0].getAttribute("value");
        getListData(1, kind);//获取数据
    })

    function getUserName() {
        return document.cookie.split(";")[0].split("=")[1];
    }

    var btns = $(".clearfix").find("li");
    // btns得到的是伪数组  里面的每一个元素 btns[i]
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            for (var i = 0; i < btns.length; i++) {
                btns[i].classList.remove("select")
            }
            this.classList.add("select");
            document.getElementsByClassName("select")
            getListData(1, this.getAttribute("value"));
        }
    }
</script>
</body>
</html>